$(function () {
    $("#topHtml").load("/html/top.html");
    $("#footHtml").load("/html/foot.html");
    $("#pageHtml").load("/html/pageHtml.html");
    chaxunCuisine();//給菜系赋值
    let data = chaxun(1, 10, 1);//默认查询第一页，得到数据
    commonData = data[0].object.commonModelDto;
});
let commonData;//得到公共的公司信息和导航信息
var cookstyleid = 0;//菜系ID
function chaxunCuisine() {
    let data = myAjax('/backProductCuisineFindAll', "", 'get');
    fuzhiCuisine(data[0].object);
    // $.ajax({
    //     url: '/backProductCuisineFindAll',
    //     type: 'get',
    //     dataType: 'json',
    //     success: function (data) {
    //         fuzhiCuisine(data[0].object);
    //         //ajax是异步请求
    //
    //     }
    // })

}

function fuzhiCuisine(data) {

    let html = '';
    cookstyleid = data[0].id;

    for (let i = 0; i < data.length; i++) {
        html += ' <div  title="' + data[i].id + '" onmouseover="changeColor(' + data[i].id + ')" onmouseout="returnColor(' + data[i].id + ')" onclick="userclick(this,' + data[i].id + ')">' + data[i].name + '</div>';
    }
    $("div[title=" + cookstyleid + "]").css({"background-color": "#e69137", "color": "#f3f3f3"}).siblings().css({
        "background-color": "#f3f3f3",
        "color": "#e69137"
    });
    $("#Cuisine").html(html);
}

function changeColor(id) {
    $("div[title=" + id + "]").css({"background-color": "#e69137", "color": "#f3f3f3"});
}

function returnColor(id) {
    $("div[title=" + id + "]").css({"background-color": "#f3f3f3", "color": "#e69137"});
}

//用戶點擊菜系
function userclick(e, id) {
    // $(e).siblings().addClass("clearback");
    cookstyleid = id;
    $(e).css({"background-color": "#e69137", "color": "#f3f3f3"}).siblings().css({
        "background-color": "#f3f3f3",
        "color": "#e69137"
    });
    page("aa");
}

//根据菜系id查询后台产品数据
//id:菜系id，
function chaxun(id, pageNum, pageSize) {
    let data = myAjax("/CuisineFindById", {id: id, pageNum: pageNum, pageSize: pageSize}, 'get');
    $("#count").val(data[0].count);
    setHtml(data[0].object.productModelList);
    return data;
}

//拼接HTML
function setHtml(data) {
    let html = '';
    for (let i = 0; i < data.length; i++) {
        html += '<div>\n' +
            '           <div class="p-img"><img src="' + data[i].imgHref + '" height="300" width="300"/></div>\n' +
            '            <h4>' + data[i].name + '</h4>\n' +
            '            <div class="p-price">价格：<span>' + data[i].price + '</span></div>\n' +
            '            <div class="p-info">\n' + data[i].content +
            '            </div>\n' +
            '        </div>';
    }
    // $(data)拿到当前对象
    //$(data).html()对当前对象进行取值
    //动态添加背景颜色
    $("#p-product").html(html);
}
